<!--增值贷产品新增-->
<template>
	<view class="box_zzd temp_wrap">
		<!--申请人部分-->
		<view class="item_wrap clearfix">
			<view class="title_bar">客户信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFront" src="/static/public/sfz.png" class="formImg" v-if="!url1"></image>
				<image :src="url1" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url1" :data-id="1" type="clear" size="20" color="red" @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">购房人姓名:<text class="red">*</text></text>
				<input class="right" type="text" v-model="data.basicBorrowerName" :disabled="isOurSelf"
					placeholder="请输入购房人姓名" :maxLength="11" ></input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:<text class="red">*</text></text>
				<input class="right" type="text" v-model="data.basicBorrowerCard"  :disabled="isOurSelf"
					placeholder="身份证号码" ></input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:<text class="red">*</text></text>
				<input class="right" type="number" v-model="data.basicBorrowerPhone"  :disabled="isOurSelf"
					placeholder="联系电话" :maxLength="11"></input>
			</view>
			<view class="item_input">
				<text class="title">现住地址:<text class="red">*</text></text>
				<view class="right address">
					<pick-regions class="addressPick" @getRegion="handleGetRegion" :defaultRegion="defaultRegionCode" :disabled="isOurSelf">
						<text class="fontSize" v-if="data.basicBorrowerAddress">{{data.basicBorrowerAddress}}</text>
						<text class="fontSize pleaholder" v-else>点击选择省市区</text>
					</pick-regions>
				</view>
			</view>
			<view class="item_input">
				<text class="title">受理时间:<text class="red">*</text></text>
				<view class="right address">
					<picker @change="acceptChange" mode="date" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择受理时间" v-model="data.acceptTime" disabled/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="btn_wrap" v-if="isNew">
			<button class="btn" @click="btnSubmit">确 认</button>
		</view>
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {uploadCard} from '@/common/util.js'
	export default {
		components: {
			mInput,
			pickRegions 
		},
		props:["formData","isNew","isOurSelf"],
		data(){
			return{
				url1: null,
				//申请人地址
				region: [],
				data:{
					//申请人信息
					basicBorrowerName: null,
					basicBorrowerCard: null,
					basicBorrowerPhone: null,
					basicBorrowerAddress: null,
					acceptTime: null,
				},
				defaultRegionCode:"500103"
			}
		},
		created() {
			if(this.formData){
				this.data = JSON.parse(JSON.stringify(this.formData));
			}
		},
		methods:{
			//上传申请人按钮
			uploadCardFront() {
				let id = 1;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url1 = res.filePath;
					this.data.basicBorrowerName = res.data.name;
					this.data.basicBorrowerCard = res.data.num;
				});
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region = region;
				this.data.basicBorrowerAddress = region.map(item=>item.name).join(' ');
			},
			handleGetRegionMate(region) {
				this.regionMate = region;
				this.data.basicBorrowerMateAddress = region.map(item=>item.name).join(' ');
			},
			//受理时间
			acceptChange(e){
				this.data.acceptTime = e.detail.value;
			}, 
			//产品属性
			attrChange(e) {
				let index = e.detail.value;
				this.data.productProperty = this.attributes[index];
			},
			//清除扫描图片
			clearFormImg(e) {
				let imgId = e.target.dataset.id ||e.currentTarget.dataset.id;
				if(imgId == 1) this.url1 = null;
			},
			//确认
			btnSubmit() {
				let checkRes = graceChecker.check(this.data, formRuleConfig.fafRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				//调用父组件的提交函数
				this.$emit("postOrderInfo", this.data);
			}
		}
	}
</script>

<style scoped lang="scss">
	.item_wrap{
		margin-top: 20rpx;
		width: 100%;
		padding: 0 40rpx 60rpx 40rpx;
		background: #FFFFFF;
		.title_bar {
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 42rpx;
			margin-top: 20rpx;
		}
	}
	.img_wrap{
		width: 100%;
		position: relative;
	}
	.formImg{
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.formImg_item_icon {
	    position: absolute;
	    right: 0;
		top: 0;
	}
	.item_input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dcdcdc;
		height: 82rpx;
		.title{
			font-size: 28rpx;
		}
		.right{
			flex: 1;
			text-align: right;
			font-size: 26rpx;
		}
		.address{
			padding: 20rpx 10rpx;
		}
		.addressPick{
			height: 38rpx;
			line-height: 38rpx;
			overflow: hidden;
		}
		.dw{
			font-size: 28rpx;
		}
	}
	.btn_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx;
		.btn{
			background: #52AAF8;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>
